<template>
    <div class="userlist">
        <!-- 面包屑 -->
        <div class="bread">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/ums/admin' }">权限</el-breadcrumb-item>
                <el-breadcrumb-item>角色列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 数据列表 -->
        <el-card shadow="always">
            <div class="data-list">
                <div class="left">
                    <el-icon size="16">
                        <Tickets />
                    </el-icon>
                    <span>数据列表</span>
                </div>
                <div class="right">
                    <el-button type="primary" @click="onAddUser">添加</el-button>
                </div>
            </div>
        </el-card>
        <!-- 用户表格 -->
        <div class="list">
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" border>
                <el-table-column type="selection" width="55" />
                <el-table-column label="编号" width="120" prop="id">
                </el-table-column>
                <el-table-column property="name" label="品牌名称" width="120" prop="name" />
                <el-table-column property="dasdad" label="商品类型" show-overflow-tooltip>dasdad</el-table-column>
                <el-table-column property="address" label="属性是否可选" prop="sort" show-overflow-tooltip>唯一</el-table-column>
                <el-table-column property="address" label="属性值的录入方式" show-overflow-tooltip>
                    手工录入
                </el-table-column>
                <el-table-column label="可选值列表" width="120">
                </el-table-column>
                <el-table-column label="排序" width="180" prop="sort">
                </el-table-column>
                <el-table-column label="操作" width="140">
                    <template #default="scope">
                        <el-button size="small" @click="onEdit(scope.row.id)">编辑</el-button>
                        <el-button type="danger" size="small" @click="DeleteItem(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="fenye">
            <el-pagination v-model:current-page="pagination.pageNum" v-model="pagination.pageSize"
                :page-sizes="[1, 5, 10, 20]" background layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <!-- 弹出框 -->
        <roleEdit :visible="visible" @cancel="onCloseDialog" @confirms="onConfirmDialog" :form="modalForm" />
    </div>
</template>
  
<script setup lang="ts">
import { ref, watchEffect } from "vue";
import type { Ref } from "vue";
import * as api from "../../request/api";
import useTable from "../../hooks/useTables";
import roleEdit from "../ums/roleEdit.vue";
import dayjs from "dayjs";
import { ElMessage, ElMessageBox } from "element-plus";
import { IAdminListItem, IRoleListItem, createItem } from '../../request/QmsAdminConreiller/index';
import { useRouter, useRoute } from "vue-router";
import { ElTable } from 'element-plus'

const value1 = ref(true)
// 使用路由函数
const router = useRoute();
const route = useRouter()
let form = {
    id: router.query.id
}

//分配角色点击事件
const btn = (i: any) => {
    // router.push({
    //   path: "/ums/DistributionMenu",
    //   query: {
    //     id: i,
    //   },
    // });
    route.push({
        path: "/ums/allocMenu",
        query: {
            id: i,
        },
    })
};
let DeleteItem = async (data: number) => {
    console.log(data);

    await api.admin.deleteList(data)

}
//分配资源的点击使事件
const btnClick = (i: any) => {
    route.push({
        path: "/ums/allocResource",
        query: {
            id: i,
        },
    });

};
// 搜索框数据
let name = ref("");
// false编辑，true新增
let add = false;
let modalForm = ref({}) as Ref<IAdminListItem>;

let {
    tableData,
    getTableData,
    pagination,
    handleSizeChange,
    handleCurrentChange,
} = useTable(api.admin.AttributeList, {
    cid: router.query.cid, //name是响应式的
    type: 0
});

// 添加角色对话框显示隐藏判断
let visible = ref(false);

// 添加用户
let onAddUser = () => {
    route.push("/pms/addProductAttr")
    // console.log(123);
    // visible.value = true;
    // add = true;
};
// 编辑
let onEdit = async (id: number) => {
    route.push(`/pms/updateProductAttr?id=${id}`)
    // name.value = "超级管理员";
};

// 搜索按钮
let onSearch = async () => {
    // console.log(name.value);
    // 发起请求，搜索数据
    getTableData();
    // let listData = await api.admin.getAdminList({ keyword: name.value })
    // console.log(listData);
};
// 重置输入框数据
const reset = () => {
    name.value = "";
};

// 子级 emit组件传过来的事件
const onCloseDialog = () => {
    visible.value = false;
};

// 确认了输入框的内容之后
const onConfirmDialog = (row: any) => {
    // console.log(row);
    ElMessageBox.confirm("此操作将添加当前用户信息，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(async () => {
            // 发请求
            // await api.admin.getRegister(row)
            if (add) {
                await api.admin.rolesRegister(row); //新增
                // console.log(row);
            }
            ElMessage({
                type: "success",
                message: "添加成功",
            });
            visible.value = false;
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "您已取消",
            });
        });
};

//分配角色对话框显示隐藏控制
let assign = ref(false);

//对话框显示隐藏点击事件
const AssignRoles = (id: number) => {
    assign.value = !assign.value;
    console.log(id);
};

//改变分配角色的对话框影藏点击事件
const onChangeAssign = () => {
    assign.value = false;
};

  //菜单事件
</script>
  
<style lang="scss" scoped>
.userlist {
    color: #303133;

    .bread {
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }

    .search {
        margin: 20px 0;
        padding: 20px;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        font-size: 14px;

        .search-top {
            display: flex;
            justify-content: space-between;

            .left {
                // float: left;
                width: 18%;

                .el-icon {
                    padding-right: 10px;
                }

                .el-button {
                    font-size: 14px;
                }
            }
        }

        .search-bottom {
            display: flex;
            justify-content: flex-start;
            overflow: hidden;
            padding: 20px 40px 0;

            .search-name {
                line-height: 34px;
                padding-right: 10px;
            }
        }

        .el-input {
            width: 200px;
            font-size: 14px;
        }
    }

    .el-card {
        .data-list {
            display: flex;
            justify-content: space-between;

            .left {
                .el-icon {
                    padding-right: 10px;
                }
            }
        }
    }

    .list {
        margin: 20px 0;
    }

    .fenye {
        float: right;
    }
}

:deep .cell {
    text-align: center;
}
</style>
  